import { useLayoutEffect, useState } from "react"
//模拟一个接口请求函数
async function queryData() {
    const data = await new Promise((resolve) => {
        setTimeout(() => {
            resolve(100)  //就是给data赋值，在两秒钟之后，data会变成666
        }, 2000)
    })
    return data
}
function App() {
    const [num, setNum] = useState(1)
    //当num值变更时
    // 浏览器会将useLayoutEffect中的effect函数执行完毕再渲染
    //effect还会阻塞很久，超过500ms会导致掉帧
    useLayoutEffect(() => {
        console.log('useLayoutEffect');
        setNum(2)
    }, [num])
    return (
        <div>
            <button onClick={() => setNum(num + 1)}>{num}</button>
        </div>
    )
}

export default App;